<!--
 * @Author: hucc
 * @Date: 2021-10-12 16:44:30
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-12 19:56:17
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{timestamp}} <br>
        <!-- 使用管道 过滤时间戳 -->
        {{timestamp | fmtDate}}
        <div :title="title | fmtValue">测试过滤器</div>
    </div>
    <script>
        //1.过滤器声明 是一个函数
        let filter1 = (timestamp) => {
            return new Date(timestamp).toLocaleString()
        }
        let filter2 = (value) => {
                //toUpperCase() 转换成大写方法
                return value.toUpperCase();
            }
            //2.全局注册过滤器 处理时间戳的一般全局注册
        Vue.filter('fmtDate', filter1)

        let vm = new Vue({
            el: '#app',
            data: {
                //获取实时的时间戳 new Date().getTime()
                timestamp: 1634028509797,
                title: 'hello filter'
            },
            methods: {},
            created() {},
            //局部注册vue过滤器
            filters: {
                fmtValue: filter2
            }
        })
    </script>
</body>

</html>